<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div id="content" role="main">
	<!-- Heading ______________________________________-->
	<h1>Contact</h1>

	<!-- Breadcrumbs ______________________________________-->
	<p itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
		id="breadcrumbs">
		<a href="/" rel="home" itemprop="url"><span itemprop="title">Home</span></a>
		<i class="icon-chevron-right"></i> Contact
	</p>
	<hr />

	<div id="map">
		<div id="map-content">
			<p class="center">Unable to load map... Try to enable your
				JavaScript!</p>
		</div>
	</div>
	<!-- END #map -->

	<!-- WYSIWYG Content ______________________________________-->
	<div class="p30">

		<h3>Contact Info</h3>

		<p>
			2939 4th Avenue W<br /> Vancouver, BC V6K 1R3<br /> Canada
		</p>

		<p>
			<strong class="p15"><i class="icon-phone" title="Phone"></i>
				&nbsp;</strong> (123) 456-9999<br /> <strong class="p15"><i
				class="icon-copy" title="Fax"></i> &nbsp;</strong> +08 (123) 456-9999<br /> <strong
				class="p15"><i class="icon-envelope" title="Email"></i>
				&nbsp;</strong> info@yourcompany.com<br /> <strong class="p15"><i
				class="icon-desktop" title="Web"></i> &nbsp;</strong> yourcompany.com
		</p>

	</div>
	<!-- END .p25 -->

	<div class="p70 right">

		<h3>Let's keep in touch</h3>

		<mark id="message"></mark>

		<form method="post" action="contact/contact.php" name="contactform"
			id="contactform" autocomplete="on">

			<fieldset>
				<div class="p50 input-block">
					<label for="name" accesskey="U"><strong>Your Name</strong>
						(required)</label> <input name="name" type="text" id="name"
						required="required" />
				</div>
				<div class="p50 input-block right">
					<label for="email" accesskey="E"><strong>Email</strong>
						(required)</label> <input name="email" type="email" id="email"
						pattern="^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$"
						required="required" />
				</div>
			</fieldset>

			<fieldset>
				<div class="input-block">
					<label for="subject" accesskey="S"><strong>Subject</strong></label>
					<input name="subject" type="text" id="subject" />
				</div>

				<div class="input-block">
					<label for="comments" accesskey="C"><strong>Comments</strong>
						(required)</label>
					<textarea name="comments" cols="40" rows="3" id="comments"
						spellcheck="true" required="required"></textarea>
				</div>
			</fieldset>

			<fieldset>
				<legend>
					<strong>Are you human?</strong>
				</legend>

				<label for="verify" accesskey="V" class="verify left"><img
					src="contact/image.php" alt="Verification code" /></label> <input
					name="verify" type="text" id="verify" size="6" required="required"
					style="width: 50px;"
					title="This confirms you are a human user and not a spam-bot." />

			</fieldset>

			<input type="submit" class="submit" id="submit" value="Send message" />

		</form>

	</div>
	<!-- END .p75 -->
	<!-- END of WYSIWYG content ______________________________________-->


</div>
<!-- END #content -->
